<template>
     <el-row style="width: 100%;min-width: 1024px;" :gutter="4" ref="allBox">
        <div class="searchTag">
                <span @click="clickTag(tag)" v-for="tag in tags">
                    <el-tag
                            :key="tag.name"
                            closable
                            :disable-transitions="true"
                            @close="closeSearchTag(tag)"
                            size="medium"
                            :type="tag.type"
                            class="keywordsTag"
                            style="margin-right: 15px;">
                        {{tag.name}}
                    </el-tag>
                </span>
        </div>
        <el-col :span="3"  ref="materielTypeBox" class="left-sider" style="overflow: auto;">
            <div class="operatBtnWrapper">
                <el-button class="operatBtnMiddle" @click="openDialog">新增</el-button>
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="540px" :close-on-press-escape="false" @close="handleClose">
                            <span>
                                <el-form :label-position="right" :rules="rules" label-width="100px" :model="typeForm" ref="typeForm">
                                    <el-form-item label="上级类别" prop="parentId">
                                        <el-cascader expand-trigger="hover" :options="typeData" v-model="typeForm.parentId" change-on-select placeholder="请选择上级类别，默认为顶级" @change="handleChange" clearable style="width: 300px;"></el-cascader>
                                    </el-form-item>
                                    <el-form-item label="类别名称" prop="name">
                                        <el-input v-model.trim="typeForm.name" ref="typeFormName" class="inputTxtWrapper" placeholder="请输入类别名称" style="width: 300px;"></el-input>
                                    </el-form-item>
                                </el-form>
                            </span>
                    <span slot="footer" class="dialog-footer" style="margin-right: 50px;">
                                <button class="operatBtn marR5" @click="closeDialog('typeForm')">取消</button>
                                <button class="operatBtn marR5" type="primary" @click.stop="onSubmit('typeForm')">{{dialogConfirm}}</button>
                            </span>
                </el-dialog>
            </div>
            <div style="margin-left: 20px;">
                <el-tree :data="typeAllDate" :props="defaultProps" node-key="id" empty-text="没有数据"
                         :expand-on-click-node="false"
                         :default-expanded-keys="defaultExpandedKeys"
                         @node-drag-start="handleTypeDragStart"
                         @node-drag-enter="handleTypeDragEnter"
                         @node-drag-leave="handleTypeDragLeave"
                         @node-drag-over="handleTypeDragOver"
                         @node-drag-end="handleTypeDragEnd"
                         @node-drop="handleTypeDrop"
                         draggable
                         :allow-drop="allowTypeDrop"
                         :allow-drag="allowTypeDrag">
                            <span class="custom-tree-node" slot-scope="{ node, data }" style="height: 100%;line-height: 100%;width: 100%;">
                                <span @click.stop="nodeClick(node.data)" style="padding: 7px 0;">{{ node.label }}</span>
                                <span class="toggleShow" style="">
                                  <el-button type="text" size="mini" @click="() => append(data)">
                                      <icon name="add" class="scaleIcon1 flushIcon svgColor" title="新增"></icon>
                                  </el-button>
                                    <el-button v-if="data.id != 0" type="text" size="mini" @click="() => edit(data)">
                                      <icon name="change" class="scaleIcon1" title="编辑" @click.stop.native = "edit(data)" style="cursor:pointer;"></icon>
                                  </el-button>
                                  <el-button type="text" size="mini" @click="() => remove(node, data)" v-show = "(data.children == undefined || data.children.length <= 0) && (data.id != 0)">
                                      <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="remove(node, data)" style="cursor:pointer;"></icon>
                                  </el-button>
                                </span>
                              </span>
                </el-tree>
            </div>
        </el-col>
        <el-col :span="21"  ref="materielBox" class="right-content">
            <el-col ref="splitLine" class="split-line"></el-col>
            <div class="operatBtnWrapper" style="height: 30px;padding: 10px 0 10px 8px;min-width: 980px;">
                <el-button v-if="isDelete < 1" class="operatBtnMiddle" @click="openMaterielDialog('新增物料','add')">新增</el-button>
                <el-button v-if="isDelete < 1" class="operatBtnMiddle" @click="handleClickMateriel" type="text" size="small">编辑</el-button>
                <transition name="el-fade-in-linear">
                    <div v-show="showMagerielDialog" class="materielClass" ref="materielDialog">
                        <div class="materielTitle">
                            <span>{{materielFormTitle}}</span>
                            <span style="display: inline-block;float: right;">
                                    <i @click="narrowMaterielDialog" class="el-icon-minus materielButton"></i>
                                    <i @click="enlargeMaterielDialog" class="el-icon-edit-outline materielButton"></i>
                                    <i @click="closeMaterielDialog" class="el-icon-close materielButton"></i>
                                </span>
                        </div>
                        <div class="materielContent">
                            <el-form :label-position="right" :rules="rules" label-width="100px" :model="materielForm" ref="materielForm" action="">
                                <el-row style="width: 100%">
                                    <el-col style="width: 50%">
                                        <el-form-item :label="fieldShow.materiel_type_id" prop="typeId">
                                            <el-cascader
                                                    expand-trigger="hover"
                                                    clearable
                                                    :options="typeData"
                                                    v-model="materielForm.typeId"
                                                    change-on-select
                                                    placeholder="产品类别"
                                                    @change="handleChange" style="width: 250px;">
                                            </el-cascader>
                                        </el-form-item>
                                        <el-form-item :label="fieldShow.materiel_name" prop="materielName">
                                            <el-input v-model.trim="materielForm.materielName" class="inputTxtWrapper" placeholder="产品名称" style="width: 200px;"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="fieldShow.materiel_no" prop="no">
                                            <el-input v-model.trim="materielForm.no" class="inputTxtWrapper"  placeholder="编号" style="width: 200px;"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="fieldShow.materiel_unit" prop="unit">
                                            <!--<el-input v-model.trim="materielForm.unit" class="inputTxtWrapper"  placeholder="单位" style="width: 200px;"></el-input>-->
                                            <el-select v-model="materielForm.unit" placeholder="请选择" style="width: 250px;">
                                                <el-option
                                                        v-for="item in unitData"
                                                        :key="item.id"
                                                        :label="item.label"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col style="width: 50%">
                                        <el-form-item :label="fieldShow.materiel_spec" prop="spec">
                                            <el-input v-model.trim="materielForm.spec" class="inputTxtWrapper"  placeholder="规格型号" style="width: 200px;"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="fieldShow.materiel_state" prop="state">
                                            <el-select v-model="materielForm.state" placeholder="使用状态,默认启用" style="width: 250px;">
                                                <el-option
                                                        v-for="item in stateOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                        style="width: 250px;">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item :label="fieldShow.materiel_brand" prop="brand">
                                            <el-input v-model.trim="materielForm.brand" class="inputTxtWrapper"  placeholder="品牌" style="width: 250px;"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item :label="fieldShow.materiel_remarks" prop="remarks">
                                    <el-input v-model.trim="materielForm.remarks" class="inputTxtWrapper"  placeholder="备注" style="width: 620px;"></el-input>
                                </el-form-item>
                                <el-row style="width: 100%">
                                    <el-col style="width: 50%">
                                        <el-form-item :label="fieldShow.images" prop="images">
                                            <el-upload
                                                    action=""
                                                    list-type="picture"
                                                    class="upload-demo"
                                                    ref="imageUpload"
                                                    :on-preview="handlePictureCardPreview"
                                                    show-file-list
                                                    :file-list="imageList"
                                                    :accept="allowImage.type"
                                                    limit="5"
                                                    name="image"
                                                    :before-upload="cutImage"
                                                    :on-exceed="exceed"
                                                    :on-change="onImageChange"
                                                    :on-remove="onImageRemove">
                                                <el-button size="small" type="primary">点击添加</el-button>
                                                <div slot="tip" class="el-upload__tip">最多只能上传<font color="red"> 5 </font>张图片，每张大小不能超过<font color="red"> 500kb</font></div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                    <el-col style="width: 50%">
                                        <el-form-item :label="fieldShow.files" prop="files">
                                            <el-upload
                                                    action=""
                                                    class="upload-demo"
                                                    ref="fileUpload"
                                                    :on-change="onFileChange"
                                                    limit="1"
                                                    :file-list="fileList"
                                                    name="file"
                                                    :auto-upload="false"
                                                    :before-upload="beforeUploadFile"
                                                    :on-remove="onFileRemove">
                                                <el-button size="small" type="primary">点击添加</el-button>
                                                <div slot="tip" class="el-upload__tip">只能上传<font color="red"> 1 </font>个文件，大小不超过<font color="red"> 2M</font></div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <div class="materielFooter">
                            <el-button class="operatBtnMiddle" @click="closeMaterielDialog">取消</el-button>
                            <el-button v-show="showMaterielDialogButton" class="operatBtnBig" type="primary" @click="onSubmitMaterielForm('materielForm','true')">保存并继续添加</el-button>
                            <el-button class="operatBtnBig" type="primary" @click="onSubmitMaterielForm('materielForm','false')">保存并退出</el-button>
                        </div>
                    </div>
                </transition>
                <el-button v-if="isDelete < 1" class="operatBtnBig" @click="changeSelectType">批量修改类别</el-button>
                <el-button v-if="isDelete < 1" class="operatBtnMiddle" @click="dellSelect">删除</el-button>
                <el-button v-if="isDelete >= 1" class="operatBtnMiddle" @click="recoverSelect">恢复</el-button>
                <el-button v-if="isDelete < 1" class="operatBtnBig" @click="showDelete">查看回收站</el-button>
                <el-button v-if="isDelete >= 1" class="operatBtnBig" @click="closeDelete">关闭回收站</el-button>
                <el-button v-if="isDelete < 1" class="operatBtnMiddle" @click="openFieldDialog">字段</el-button>
                <el-button v-if="isDelete < 1" class="operatBtnMiddle" @click="openUnitDialog">单位</el-button>
                <a v-if="isDelete < 1" class="operatBtnMiddle" :href="outExcelUrl">导出</a>
                <el-dialog title="批量修改类别" :visible.sync="changeTypeVisible" width="450px" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeTypeVisible">
                    <el-form>
                        <el-form-item label="上级类别" prop="changeType">
                            <el-cascader expand-trigger="hover" :options="typeData" v-model="changeType" change-on-select placeholder="请选择修改后的类别" clearable style="width: 300px;"></el-cascader>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="closeTypeVisible">取消</el-button>
                        <el-button type="primary" @click="onSubmitChangeType()">确定</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="字段管理" :visible.sync="fieldDialogVisible" width="380px" :close-on-press-escape="false" @close="closeField" v-dialogDrag>
                            <span>
                                <span style="display: inline-block;width: 130px;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #d1d1d1;">字段名</span>
                                <span style="display: inline-block;width: 90px;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #d1d1d1;">显示</span>
                                <span style="display: inline-block;width: 90px;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #d1d1d1;">加入搜索</span>
                                <!--<span style="display: inline-block;width: 90px;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #d1d1d1;">操作</span>-->
                                <el-tree :data="fieldList" :props="defaultProps" @node-contextmenu="nodeContextMenu" style="width: 320px;border-bottom: 1px solid #d1d1d1;font-size: 14px;"
                                         node-key="index"
                                         @node-drag-start="handleDragStart"
                                         @node-drag-enter="handleDragEnter"
                                         @node-drag-leave="handleDragLeave"
                                         @node-drag-over="handleDragOver"
                                         @node-drag-end="handleDragEnd"
                                         @node-drop="handleDrop"
                                         draggable
                                         :allow-drop="allowDrop"
                                         :allow-drag="allowDrag">
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span v-if="fieldView" style="width: 130px;">{{ node.data.show_name }}</span>
                                        <input v-if="!fieldView" v-model="node.data.show_name" style="width: 90px;height: 16px;line-height: 16px;font-size: 12px;margin-right: 36px;margin-top: 1px;margin-left: -2px;" />
                                        <span>
                                            <el-checkbox v-model="node.data.is_show" style="margin-left: 20px;"></el-checkbox>
                                            <el-checkbox v-model="node.data.search_able" :disabled="!node.data.can_search" style="margin-left: 45px;"></el-checkbox>
                                            <!--<el-button v-if="node.data.can_del" type="text" size="mini" @click="() => removeField(node, data)" title="删除">
                                                <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="removeField(node,data)" style="cursor:pointer;margin-left: 32px;"></icon>
                                            </el-button>-->
                                        </span>
                                    </span>
                                </el-tree>
                            </span>
                    <span slot="footer" class="dialog-footer">
                                <el-button class="operatBtnMiddle" @click="fieldDialogVisible = false;fieldView = true">关闭</el-button>
                                <el-button class="operatBtnMiddle" @click="onSubmitField">保存</el-button>
                            </span>
                </el-dialog>
                <el-dialog title="单位管理" :visible.sync="unitDialogVisible" width="300px" @close="unitDialogVisible = false,unitView = true" v-dialogDrag>
                    <el-dialog width="400px" v-dialogDrag :modal="false" title="新建单位" :visible.sync="innerUnitVisible" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @close="closeUnit">
                        <el-form :model="unitForm" :rules="unitRule" ref="unitForm" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="单位名称" prop="unitName">
                                <el-input v-model.trim="unitForm.unitName"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                <el-button class="operatBtnMiddle" @click="closeUnit">取消</el-button>
                                <el-button class="operatBtnMiddle" type="primary" @click="submitUnit">保存</el-button>
                            </span>
                    </el-dialog>
                    <span>
                            <span style="display: inline-block;width: 130px;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #d1d1d1;">单位名称</span>
                            <span style="display: inline-block;width: 90px;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid #d1d1d1;">操作</span>
                            <el-tree :data="unitData" :props="defaultProps"
                                     node-key="index"
                                     @node-contextmenu="unitNodeContextMenu"
                                     @node-drag-start="handleDragStart"
                                     @node-drag-enter="handleDragEnter"
                                     @node-drag-leave="handleDragLeave"
                                     @node-drag-over="handleDragOver"
                                     @node-drag-end="handleDragEnd"
                                     @node-drop="handleDrop"
                                     draggable
                                     :allow-drop="allowDrop"
                                     :allow-drag="allowDrag"
                                     style="width: 130px;">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span v-if="unitView" style="width: 130px;">{{ node.data.label }}</span>
                                <input v-if="!unitView" v-model="node.data.label" style="width: 100px;height: 16px;line-height: 16px;font-size: 12px;margin-right: 36px;margin-top: 1px;margin-left: -2px;" />
                                <span style="display: inline-block;margin-left: 15px;">
                                    <el-button @click="handleDelUnit(data)" type="text" size="small" style="padding: 2px 5px;" title="删除">
                                        <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="handleDelUnit(data)" style="cursor:pointer;"></icon>
                                    </el-button>
                                </span>
                            </span>
                        </el-tree>
                            </span>
                    <span slot="footer" class="dialog-footer">
                            <el-button class="operatBtnMiddle" @click="unitDialogVisible = false,unitView = true">关闭</el-button>
                            <el-button class="operatBtnMiddle" type="primary" @click="innerUnitVisible = true">新建</el-button>
                            <el-button class="operatBtnMiddle" type="primary" @click="submitUnitList">保存</el-button>
                        </span>
                </el-dialog>
                <div style="min-width:400px;height: 30px;display: inline-block;">
                    <el-form :inline="true" :model="search" size="small" style="height: 30px;line-height: 30px;">
                        <el-form-item label="关键字:">
                            <el-input v-model.trim="keywords" placeholder="" style="margin-top: 1px;width: 180px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="operatBtnMiddle" @click="searchMateriel">查询</el-button>
                            <el-button class="operatBtnMiddle" @click="getMateriel()">刷新</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="width: 98%;margin: 0 0 0 8px;">
                <el-table
                        :data="materielData"
                        @sort-change="handleSortChange"
                        border
                        @selection-change="selectionChange"
                        @filter-change="filterChange"
                        :height="tableHeight"
                        size="mini"
                        ref="materielTable"
                        :header-cell-style="headRowStyle"
                        @row-click="rowClick"
                        :row-style="rowClass"
                        class="materielTable"
                        style="width: 100%;">
                    <el-table-column
                            type="selection"
                            width="35">
                    </el-table-column>
                    <el-table-column
                            v-for="(item,index) in fieldList" :key="index"
                            v-if="item.field_name != 'images' && item.field_name != 'files' && item.field_name != 'materiel_state' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.can_sort"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            align="center">
                        <template slot-scope="scope">
                            <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-else-if="item.field_name == 'materiel_state' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.can_sort"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            :filters="stateOptions"
                            column-key="state"
                            :filter-method="filterStateHandler"
                            align="center">
                        <template slot-scope="scope">
                            <span v-html="getRenderValue(scope.row,item.field_name)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-else-if="item.field_name == 'images' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.sort_able"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            align="center">
                        <template slot-scope="scope" style="padding: 0;">
                            <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.images[0]">
                                <div class="block" style="height: 330px;width: 350px;">
                                    <el-carousel style="height: 330px;width: 350px;"  indicator-position="outside" autoplay="false">
                                        <el-carousel-item v-for="item in getImages(scope.row.images)" :key="item" align="center">
                                            <img :src="item" alt="" style="height: 300px;">
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                                <div slot="reference" class="images-wrapper" style="height: 23px;">
                                        <span>
                                            <img :src="(scope.row.images)[0].image_url" alt="" style="width: 23px;height: 23px;">
                                        </span>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-else-if="item.field_name == 'files' && item.is_show == 1"
                            :prop="item.field_name"
                            :sortable="item.sort_able"
                            :label="item.show_name"
                            show-overflow-tooltip="true"
                            fit
                            align="center">
                        <template slot-scope="scope" style="padding: 0;">
                            <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.files[0]">
                                <div class="block">
                                    <p v-for="item in getFiles(scope.row.files)" :key="item" style="font-size: 12px;margin-bottom: 3px;">
                                        <a :href="item.url" style="color: black">{{item.name}}</a>
                                    </p>
                                </div>
                                <div slot="reference" class="images-wrapper">
                                        <span>
                                            <h3>资料</h3>
                                        </span>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!--<el-table-column
                            label="操作"
                            class-name="operation"
                            align="center"
                            fixed="right"
                            width="90">
                        <template slot-scope="scope">
                            <el-button v-if="isDelete < 1" @click="handleClickMateriel(scope.row)" type="text" size="small" style="padding: 2px 5px;" title="编辑">
                                <icon name="change" class="scaleIcon1" title="编辑" @click.native.stop = "handleClickMateriel(scope.row)" style="cursor:pointer;"></icon>
                            </el-button>
                            <el-button v-if="isDelete < 1" @click="handleDelMateriel(scope.row,scope.$index)" type="text" size="small" style="padding: 2px 5px;" title="删除">
                                <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="handleDelMateriel(scope.row,scope.$index)" style="cursor:pointer;"></icon>
                            </el-button>
                            <el-button v-if="isDelete >= 1" @click="handleRecoverMateriel(scope.row,scope.$index)" type="text" size="small" style="padding: 2px 5px;" title="恢复">
                                <icon name="taxCanEdit" class="scaleIcon1" title="恢复" @click.native.stop="handleRecoverMateriel(scope.row,scope.$index)" style="cursor:pointer;"></icon>
                            </el-button>
                        </template>
                    </el-table-column>-->
                </el-table>
            </div>
            <e-col :span="21" class="pageWrapper" ref="pageDiv">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalMateriel"
                        :current-page="currentPage"
                        style="padding-top: 6px;padding-left: 20px;height: 40px;">
                </el-pagination>
            </e-col>
        </el-col>
        <div class="cropperWrapper" v-if="isShowCropper">
            <vueCropper ref="cropper"
                        :img="option.img"
                        :outputSize="option.outputSize"
                        :outputType="option.outputType"
                        :info="option.info"
                        :canScale="option.canScale"
                        :autoCrop="option.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :fixed="option.fixed"
                        :fixedNumber="option.fixedNumber"
            ></vueCropper>
            <div class="cropperBtnPos">
                <button class="operatBtn" @click.stop="onCubeImg">确认裁剪</button>
                <button class="operatBtn" @click.stop="cancelCubeImg">取消</button>
            </div>
        </div>
    </el-row>
</template>

<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    import { getPageData,dataURItoBlob} from "@/assets/js/common.js"
    import { mapGetters } from 'vuex'
    import { Carousel,CarouselItem } from 'element-ui';
    import filter from "../../../assets/js/filter";
    Vue.use(Carousel);
    Vue.use(CarouselItem);

    export default {
        data() {
            /* 验证物料表单中字段名称，必须为小写字母开头，后续也为小写字母或下划线 */
            var checkFieldlength = (rule, value, callback) => {
                if (value.length < 4 || value.length > 24){
                    callback(new Error('长度只能在4位到24位之间！'));
                }
                let re = /^[a-z][a-z_]*$/;
                let reg = new RegExp(re);
                if (reg.test(value)){
                    callback();
                }else{
                    callback(new Error('名称只能为小写字母和下划线，并且只能以小写字母开头'));
                }
            };
            /* 验证输入的类别名称同级下是否已存在 */
            var checkTypeName = (rule, value, callback) => {
                if(!this.typeNameList){
                    callback();
                }
                let pId = this.typeForm.parentId;
                var listKey = '';
                if (pId[0] == 0 || pId.length < 1){
                    listKey = '-'+value;
                }else{
                    listKey = pId.join('-');
                    listKey = '-'+listKey+'-'+value;
                }
                if (this.typeNameList[listKey] == 1) {
                    callback(new Error('同类别下已存在相同分类！'));
                } else {
                    callback();
                }
            };
            /* 验证输入是否数字或两位小数 */
            var checkIsNumber = (rule, value, callback) => {
                if (value.length < 1){
                    callback();
                }else{
                    var numReg = /^(((([^0][0-9]*)|0)\.([0-9]{1,2}))|([^0][0-9]*))$/;
                    var numRe = new RegExp(numReg)
                    if (!numRe.test(value)){
                        callback(new Error('请输入整数或两位小数'));
                    }else {
                        callback();
                    }
                }
            };
            return{
                /* --------------------------------------- 物料类别 -------------------------------------------- */
                typeData: [],           //类别数据tree
                typeAllDate: [],        //类别数据（添加全部作为最外层）
                dialogVisible: false,  //控制新增类别弹框的显示
                dialogTitle: '',        //弹框标题
                dialogConfirm: '保存',  //弹框确认键显示的文字
                typeForm:{
                    id: '',         //类别id,修改时不为空
                    parentId : [],  //父类别
                    name: '',       //类别名称
                    sort: ''        //排序
                },
                defaultExpandedKeys: [0], //默认展开的节点
                isFormOk:false,          //表单默认没有通过校验
                typeNameList: [],         //存放类别路径+名称，键为表中path字段加name字段,值为1
                tmpNameList: '',          //记录执行修改时的类别的路径和名称
                tmpIdSelf: [],            //类别id(自身,修改时时间用)
                tmpNodeData: '',          //节点信息
                rules: {                  //类别表单验证规则
                    name: [
                        { type: 'string',message: '请输入字符串', trigger: 'blur' },
                        { required: true, message: '请输入类别名称', trigger: 'blur' },
                        { validator: checkTypeName, trigger: 'blur'}
                    ],
                    typeId: [
                        { required: true, message: '请选择物料类别', trigger: 'blur' }
                    ],
                    materielName: [
                        { required: true, message: '请输入物料名称', trigger: 'blur' },
                    ],
                },

                /* --------------------------------------- 物料 -------------------------------------------- */
                materielData: [],  //物料数据
                tableHeight: window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 77,   //根据不同电脑计算table的高度
                totalMateriel: '',              //物料总数，类别、关键字有影响
                pageSizes: [20, 50, 100],       //每页条数选择数组
                pageSize: 20,                   //每页条数
                currentPage: 1,                 //当前页码
                currentType: 0,                 //当前物料类别
                sortColumn: 'create_time',      //排序字段，默认创建时间
                sortDirection: 'descending',    //排序方式，默认降序
                selectState: [],                //筛选状态
                keywords: '',                   //物料搜索关键字
                isDelete: 0,                    //物料是否被删除 0否  1是
                showMagerielDialog: false,     //是否显示物料表单弹框
                changeTypeVisible: false,      //是否显示批量修改类别弹框
                changeType: [],                 //批量修改后的类别
                stateOptions: [
                    {label:'启用',value:0,text:'启用'},
                    {label:'用完即止',value:1,text:'用完即止'},
                    {label:'禁用',value:2,text:'禁用'},
                    {label:'选型',value:3,text:'选型'},
                    {label:'报废',value:4,text:'报废'},
                ],
                filterValue: [],
                materielForm:{
                    id: '',                 //主键id
                    typeId: '',             //类别id
                    materielName: '',       //物料名称
                    brand: '',              //品牌
                    no: '',                 //物料编号
                    unit: '',               //单位
                    spec: '',               //物料规格型号
                    state: '',              //物料状态
                    price: '',              //物料价格
                    remarks: '',            //物料备注
                },
                fieldShow: {},                   //用于物料表单字段显示名
                materielFormTitle: '新增物料',   //新增物料表单标题
                showMaterielDialogButton: true, //物料表单按钮‘保存并继续’是否显示
                formConfirmInfo: '',             //右边确认键名称
                imageList: [],                   //图片列表
                errorMess: '',                   //保存增加/修改物料时文件/图片的错误信息
                fileList: [],                    //文件列表
                delImageList:[],                 //要删除的图片
                delFileList:[],                  //要删除的文件
                allowImage: {                    //图片规则
                    type: 'image/gif,image/jpeg,image/png,image/jpg',
                    size: 500,  //单位kb
                },
                allowFile: {                    //文件规则
                    size: 2048,  //单位kb
                },
                tags: [],
                tableHeader: ['materiel_shelves','safe_inventory','avg_price','materiel_price','materiel_inventory','pending_storage','produce_inventory','test_inventory','develop_inventory','total_inventory'], //不显示蓝色背景的表头字段
                selection: [],   //选中的物料
                outExcelUrl: '',  //导出物料的url地址
                isShowCropper: false,
                // 裁剪组件的基础配置option
                option: {
                    img: '',                         //裁剪图片的地址
                    info: true,                      //裁剪框的大小信息
                    outputSize: 0.8,                   // 裁剪生成图片的质量
                    outputType: 'png',              //裁剪生成图片的格式
                    canScale: true,                 // 图片是否允许滚轮缩放
                    autoCrop: true,                  // 是否默认生成截图框
                    autoCropWidth: 400,              // 默认生成截图框宽度
                    autoCropHeight: 400,             // 默认生成截图框高度
                    canMove: true,                      //  能否拖动图片
                    fixed: true,                    //是否开启截图框宽高固定比例
                    fixedNumber: [1, 1],              //截图框的宽高比例
                    centerBox: true,                 //  截图框是否限制在图片里(只有在自动生成截图框时才能生效)
                    name: ''
                },
                selectRow: [],
                /* --------------------------------------- 物料字段 -------------------------------------------- */
                fieldDialogVisible: false,      //物料字段列表弹框
                fieldView: true,                //物料字段名称 更改只读、修改
                fieldList: [],                  //物料字段列表
                searchField: [],                //可搜索字段列表

                /* --------------------------------------- 物料单位 -------------------------------------------- */
                unitData: [],                    //物料单位列表
                unitView: true,                 //控制是否显示物料单位input框
                unitDialogVisible: false,       //控制是否显示物料单位管理弹框
                innerUnitVisible:false,         //控制是否显示新建物料单位弹框
                unitForm: {
                    unitName: '',
                },
                unitRule:{
                    unitName:[
                        { required: true, message: '请输入单位名称', trigger: 'blur' },
                    ]
                },
            }
        },
        methods: {
            /* --------------------------------------- 物料字段 -------------------------------------------- */
            /* 获取物料字段信息 */
            getFieldList: function(){
                this.apiPost('/materiel/field/list','').then(res=>{
                    if (res.code == 200){
                        this.fieldList = res.field;
                        this.fieldShow = res.fieldShow;
                        this.searchField = res.searchField;
                    }else{
                        _g.toastMsg("error", res.message);
                    }
                });
            },
            /* 打开物料字段弹框 */
            openFieldDialog:function(){
                this.fieldDialogVisible = true;
            },
            /* 右键点击物料字段事件 */
            nodeContextMenu:function(){
                if (this.fieldView){
                    this.fieldView = false;
                }else{
                    this.fieldView = true;
                }
            },
            /* 关闭物料字段列表弹框 */
            closeField:function(){
                this.fieldView = true;
            },
            /* 提交物料字段信息到后台进行更新 */
            onSubmitField:function(){
                this.fieldView = true;
                let data = this.fieldList;
                this.fieldDialogVisible = false;
                this.apiPost('materiel/field/update',data).then(res=>{
                    if (res.code == 200){
                        this.getFieldList();
                        _g.toastMsg('success',res.message);
                    }else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            /* 拖动物料字段信息事件 */
            handleDragStart(node, ev) {
                //console.log('drag start', node);
            },
            handleDragEnter(draggingNode, dropNode, ev) {
                //console.log('tree drag enter: ', dropNode.show_name);
            },
            handleDragLeave(draggingNode, dropNode, ev) {
                //console.log('tree drag leave: ', dropNode.show_name);
            },
            handleDragOver(draggingNode, dropNode, ev) {
                //console.log('tree drag over: ', dropNode.show_name);
            },
            handleDragEnd(draggingNode, dropNode, dropType, ev) {
                //console.log('tree drag end: ', dropNode && dropNode.show_name, dropType);
            },


            /* 拖动结束后重新获取物料以解决表头跟表体信息错位的问题 */
            handleDrop(draggingNode, dropNode, dropType, ev) {
                this.getMateriel();
            },
            /* 禁止成为其它字段下级 */
            allowDrop(draggingNode, dropNode, type) {
                return type !== 'inner';
            },
            /* 允许拖动 */
            allowDrag(draggingNode) {
                //return draggingNode.data.show_name.indexOf('名称') === -1;
                return true;
            },

            /* --------------------------------------- 物料单位 ---------------------------------------- */
            /* 打开物料单位管理弹框 */
            openUnitDialog:function(){
                this.unitDialogVisible = true;
            },
            /* 获取物料单位列表 */
            getUnit:function(){
                this.apiPost('materiel/unit/get','').then(res=>{
                    this.unitData = res.data;
                });
            },
            /* 新增/修改物料单位信息 */
            submitUnit:function(){
                this.$confirm('是否确认新建?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('提交中');
                    let data = {};
                    data.unitName = this.unitForm.unitName;
                    this.apiPost('materiel/unit/save',data).then(res=>{
                        _g.showLoading().close();
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        }else{
                            _g.toastMsg('success',res.message);
                            this.resetUnitForm();
                            this.innerUnitVisible = false;
                            this.getUnit();
                        }
                    });
                });
            },
            /* 删除物料单位 */
            handleDelUnit:function(data){
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let unit = {};
                    unit.id = data.id;
                    this.apiPost('materiel/unit/del',unit).then(res=>{
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.getUnit();
                        }
                    });
                });
            },
            /* 更新物料单位信息 */
            submitUnitList:function(){
                let data = this.unitData;
                this.apiPost('materiel/unit/update',data).then(res=>{
                    if (res.code != 200){
                        _g.toastMsg('error',res.message);
                    } else{
                        _g.toastMsg('success',res.message);
                        this.unitDialogVisible = false;
                        this.unitView = true;
                    }
                });
            },
            /* 关闭物料单位管理弹框 */
            closeUnit:function(){
                this.innerUnitVisible = false;
                this.resetUnitForm();
            },
            /* 重置物料单位表单 */
            resetUnitForm: function(){
                this.$refs['unitForm'].resetFields();
            },
            /* 右键单击物料单位树事件 */
            unitNodeContextMenu:function(){
                this.unitView = !this.unitView;
            },
            /* --------------------------------------- 物料 -------------------------------------------- */
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                if (rowIndex == 0 && !(this.tableHeader.indexOf(column.property) >=0)){
                    return 'background:#E6EEF8;color:#222;padding:3px 0;';
                }else{
                    return 'background:#faecd8;;color:#222;padding:3px 0;';
                }
            },
            /* 修改每页条数事件 */
            handleSizeChange:function(size){
                let tmpSize = this.pageSize;
                if (tmpSize > this.totalMateriel && size > this.totalMateriel){
                    this.pageSize = size;
                    return;
                }
                this.pageSize = size;
                this.getMateriel();
            },
            /* 修改当前页码事件 */
            handleCurrentChange:function(page){
                this.currentPage = page;
                this.getMateriel();
            },
            /* 修改排序事件 */
            handleSortChange:function(column){
                if (column.prop){
                    this.sortColumn = column.prop;
                    this.sortDirection = column.order;
                }else{
                    this.sortColumn = 'create_time';
                    this.sortDirection = 'descending';
                }
                this.getMateriel();
            },
            /* 缩小物料表单弹框尺寸 */
            narrowMaterielDialog:function(){
                var materielDialogDiv = this.$refs.materielDialog;
                materielDialogDiv.style.height = 55 + 'px';
                materielDialogDiv.style.overflow = 'hidden';
            },
            /* 恢复物料表单弹框尺寸 */
            enlargeMaterielDialog:function(){
                var materielDialogDiv = this.$refs.materielDialog;
                materielDialogDiv.style.height = 'auto';
                materielDialogDiv.style.overflow = 'auto';
            },
            /* 关闭新增物料窗口 */
            closeMaterielDialog:function(){
                var materielDialogDiv = this.$refs.materielDialog;
                //materielDialogDiv.style.visibility = 'hidden';
                this.showMagerielDialog = false;
                this.clearMaterielForm('materielForm');
            },
            /* 点击行事件，复制相应行的物料信息到物料表单，不包括文件图片 */
            rowClick:function(row, column, event){
                if (this.showMagerielDialog){
                    let pId = [];
                    if (row.type.path.length > 1){
                        let path = row.type.path.substr(1,row.type.path.length-2);
                        let key = 0;
                        path = path.split('-');
                        for (let value of path) {
                            pId[key] = Number(value);
                            key++;
                        }
                    }
                    pId.push(row.type.id);
                    this.materielForm.typeId = pId;
                    this.materielForm.materielName = row.materiel_name;
                    if (row.materiel_brand && row.materiel_brand != 'null'){
                        this.materielForm.brand = row.materiel_brand;
                    }
                    if (row.materiel_no && row.materiel_no != 'null'){
                        this.materielForm.no = row.materiel_no;
                    }
                    if (row.materiel_unit && row.materiel_unit != 'null'){
                        this.materielForm.unit = row.materiel_unit;
                    }
                    if (row.materiel_spec && row.materiel_spec != 'null'){
                        this.materielForm.spec = row.materiel_spec;
                    }
                    if (row.materiel_remarks && row.materiel_remarks != 'null'){
                        this.materielForm.remarks = row.materiel_remarks;
                    }
                    if (row.materiel_state >= 0){
                        let state = row.materiel_state;
                        this.materielForm.state = state;
                    }
                }else{
                    this.selection.forEach(item => {
                        // 排他,每次选择时把其他选项都清除
                        if (item.id !== row.id) {
                            this.$refs['materielTable'].toggleRowSelection(item);
                        }
                    });
                    this.$refs['materielTable'].toggleRowSelection(row);
                }
            },
            /* 打开新增物料窗口 */
            openMaterielDialog:function(title,type){
                if (type == 'add'){
                    this.showMaterielDialogButton = true;
                } else{
                    this.showMaterielDialogButton = false;
                }
                var materielDialogDiv = this.$refs.materielDialog;
                this.showMagerielDialog = true;
                this.materielFormTitle = title;
                materielDialogDiv.style.height = 'auto';
                materielDialogDiv.style.overflow = 'auto';
                materielDialogDiv.style.top = 50 + 'px';
                this.splitLineHeight();
            },
            /* 打开修改物料窗口 */
            handleClickMateriel:function(){
                if (this.selection.length < 1){
                    _g.toastMsg('error','请选择要编辑的物料');
                    return;
                }
                if (this.selection.length > 1){
                    _g.toastMsg('error','不能同时编辑多个物料');
                    return;
                }
                let data = this.selection[0];
                let pId = [];
                //this.formTitle = '物料修改';
                //this.formConfirmInfo = '修改'+data.materiel_name;
                if (data.type.path.length > 1){
                    let path = data.type.path.substr(1,data.type.path.length-2);
                    let key = 0;
                    path = path.split('-');
                    for (let value of path) {
                        pId[key] = Number(value);
                        key++;
                    }
                }
                pId.push(data.type.id);
                if (data.materiel_unit){
                    this.materielForm.unit = data.materiel_unit;
                }
               if (data.materiel_state >= 0){
                    let stateVal = data.materiel_state;
                    this.materielForm.state = stateVal;
                }
                if (data.materiel_brand && data.materiel_brand != 'null'){
                    this.materielForm.brand = data.materiel_brand;
                }
                this.materielForm.typeId = pId;
                this.materielForm.id = data.id;
                this.materielForm.materielName = data.materiel_name;
                this.materielForm.no = data.materiel_no == null ? '' : data.materiel_no;
                this.materielForm.spec = data.materiel_spec;
                this.materielForm.remarks = data.materiel_remarks;

                if (data.images.length > 0){
                    for (let i in data.images){
                        this.imageList.push({name:data.images[i].img_name,url:data.images[i].image_url,id:data.images[i].id,'data':''});
                    }
                }
                if (data.files.length > 0){
                    for (let i in data.files){
                        this.fileList.push({name:data.files[i].old_name,url:data.files[i].file_url,id:data.files[i].id});
                    }
                }
                this.openMaterielDialog('修改物料','edit');
            },
            /* 重置表单 */
            resetForm: function(formName){
                this.clearMaterielForm(formName);
                let params = this.$route.query;
                if (params.id) {
                    this.getMateriel(params.id);
                }
            },
            /* 清空materielForm */
            clearMaterielForm:function(formName){
                this.$refs[formName].resetFields();
                this.materielForm.id = '';
                this.materielForm.typeId = [];
                this.materielForm.materielName = '';
                this.materielForm.no = '';
                this.materielForm.spec = '';
                this.materielForm.state = '';
                this.materielForm.brand = '';
                this.materielForm.unit = '';
                this.materielForm.remarks = '';
                this.imageList = [];
                this.fileList = [];
                this.delImageList = [];
                this.delFileList = [];
                this.errorMess = '';
            },
            /* 提交物料表单到后台，新建和修改 */
            onSubmitMaterielForm:function(formName,type){
                /*for (let i in this.imageList){
                    this.beforeUploadImage(this.imageList[i]);
                }*/
                for (let i in this.fileList){
                    this.beforeUploadFile(this.fileList[i]);
                }
                if (this.errorMess){
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.errorMess
                    });
                    this.errorMess = '';
                    return;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认 '+this.formConfirmInfo+' ?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        }).then(()=>{
                            _g.showLoading('提交中');
                            var formData = new FormData();
                            for (let x in this.materielForm){
                                if (x == 'typeId'){
                                    formData.append(x,this.materielForm[x][this.materielForm[x].length-1]);
                                }else{
                                    formData.append(x,this.materielForm[x]);
                                }
                            }
                            if (this.delImageList.length > 0){
                                for (let m in this.delImageList){
                                    formData.append('delImage[]',this.delImageList[m]);
                                }
                            }
                            if (this.delFileList.length > 0){
                                for (let n in this.delFileList){
                                    formData.append('delFile[]',this.delFileList[n]);
                                }
                            }
                            for(let i=0;i<this.imageList.length;i++){
                                if (!(this.imageList[i].id)){
                                    formData.append('image[]',this.imageList[i].data,this.imageList[i].name);
                                }
                            }
                            /*for(let i=0;i<this.imageList.length;i++){
                                if (this.imageList[i].raw){
                                    formData.append('image[]',this.imageList[i].raw);
                                }
                            }*/
                            for(let j=0;j<this.fileList.length;j++) {
                                if (this.fileList[j].raw) {
                                    formData.append('file[]', this.fileList[j].raw);
                                }
                            }
                            this.apiPost('/materiel/save',formData).then(data=>{
                                _g.showLoading().close();
                                if(typeof data === 'string'){
                                    data = JSON.parse(data);
                                }
                                if (data.code == 401){
                                    _g.toastMsg("error", data.message);
                                    this.$router.push('/');
                                }
                                if (data.code != 200){
                                    _g.toastMsg("error", data.message);
                                    this.errorMess = '';
                                    return;
                                }
                                this.getMateriel();
                                this.clearMaterielForm('materielForm');
                                _g.toastMsg("success", data.message);
                                if (type == 'false'){
                                    this.showMagerielDialog = false;
                                }
                            });
                        }).catch(()=>{
                            _g.toastMsg("error", data.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            /* 物料表选中事件 */
            selectionChange:function(selection){
                this.selection = selection;
            },
            /* 筛选状态事件 */
            filterStateHandler:function(value, row){
                let state = row.materiel_state;
                return state == value;
            },
            filterChange:function(filters){
                let state = [];
                for (let i = 0; i < filters.state.length; i++){
                    state.push(filters.state[i]);
                }
                this.filterValue = state;
                this.currentPage = 1;
                this.getMateriel();
            },
            /* 批量修改类别按钮事件 */
            changeSelectType:function(){
                let selection = this.selection;
                if (selection && selection.length > 0){
                    this.changeTypeVisible = true;
                }else{
                    _g.toastMsg('error','没有选中任何物料');
                }
            },
            /* 关闭批量修改类别弹框 */
            closeTypeVisible:function(){
                this.changeTypeVisible = false;
                this.changeType = [];
            },
            /* 批量修改类别数据提交 */
            onSubmitChangeType:function(){
                if (!this.changeType || this.changeType.length <= 0){
                    _g.toastMsg('error','请选择类别！');
                    return;
                }
                this.$confirm('是否确定批量修改类别?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('提交中');
                    this.changeTypeVisible = false;
                    let data = [];
                    let typeId = this.changeType[this.changeType.length - 1];
                    for (let i in this.selection){
                        data.push(this.selection[i]['id']);
                    }
                    this.apiPost('materiel/changeType',[data,typeId]).then(res=>{
                        _g.showLoading().close();
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        }else{
                            _g.toastMsg('success',res.message);
                            this.getMateriel();
                            this.changeTypeVisible = false;
                            this.changeType = [];
                            this.toggleSelection();
                        }
                    });
                });
            },
            /* 批量删除 */
            dellSelect:function(){
                let selection = this.selection;
                if (selection && selection.length > 0){
                    let data = [];
                    for (let i in selection){
                        data.push(selection[i]['id']);
                    }
                    this.$confirm('是否确定批量删除?','提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(()=>{
                        _g.showLoading('提交中');
                        this.apiPost('materiel/delSelect',data).then(res=>{
                            _g.showLoading().close();
                            if (res.code != 200){
                                _g.toastMsg('error',res.message);
                            } else {
                                _g.toastMsg('success',res.message);
                                let total = this.totalMateriel - data.length;
                                let pageSize = this.pageSize;
                                let maxPage = Math.ceil(total/pageSize);
                                if (this.currentPage > maxPage && this.currentPage > 1){
                                    this.currentPage = maxPage;
                                }
                                this.getMateriel();
                                this.selection = [];
                            }
                        });
                    });
                }else{
                    _g.toastMsg('error','没有选中任何物料');
                }
            },
            recoverSelect:function(){
                let selection = this.selection;
                if (selection && selection.length > 0){
                    let data = [];
                    for (let i in selection){
                        data.push(selection[i]['id']);
                    }
                    this.$confirm('是否确定批量恢复?','提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(()=>{
                        _g.showLoading('提交中');
                        this.apiPost('materiel/recoverSelect',data).then(res=>{
                            _g.showLoading().close();
                            if (res.code != 200){
                                _g.toastMsg('error',res.message);
                            } else {
                                _g.toastMsg('success',res.message);
                                let total = this.totalMateriel - data.length;
                                let pageSize = this.pageSize;
                                let maxPage = Math.ceil(total/pageSize);
                                if (this.currentPage > maxPage && this.currentPage > 1){
                                    this.currentPage = maxPage;
                                }
                                this.getMateriel();
                                this.selection = [];
                            }
                        });
                    });
                }else{
                    _g.toastMsg('error','没有选中任何物料');
                }
            },
            /*handleRecoverMateriel:function(row){
                let data = {};
                data.id = row.id;
                this.$confirm('是否确定恢复?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('提交中');
                    this.apiPost('materiel/recover',data).then(res=>{
                        _g.showLoading().close();
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else {
                            _g.toastMsg('success',res.message);
                            let total = this.totalMateriel - 1;
                            let pageSize = this.pageSize;
                            let maxPage = Math.ceil(total/pageSize);
                            if (this.currentPage > maxPage && this.currentPage > 1){
                                this.currentPage = maxPage;
                            }
                            this.getMateriel();
                            this.selection = [];
                        }
                    });
                });
            },*/
            showDelete:function(){
                this.currentPage = 1;
                this.isDelete = 1;
                this.getMateriel();
            },
            closeDelete:function(){
                this.currentPage = 1;
                this.isDelete = 0;
                this.getMateriel();
            },
            /* 取消选中 */
            toggleSelection:function(rows){
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.materielTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.materielTable.clearSelection();
                }
                this.selection = [];
            },
            /* 计算导出物料的url */
            getOutExcelUrl:function(){
                let locationUrl = window.location.href;
                let path = this.$route.path;
                if (path.indexOf('/') == 0){
                    path = path.substr(1,path.length);
                }
                let menuPath = '';
                if (path.indexOf('/') > 0){
                    menuPath = path.split('/');
                    menuPath = menuPath.join('-');
                }else{
                    menuPath = path;
                }
                let url = '';
                if (locationUrl.indexOf('https') >= 0){
                    url ='https://';
                }else{
                    url ='http://';
                }
                url += window.location.host;
                //url += 'localhost';
                url += '/rdms/php/public/index.php/materiel/outToExcel/' + menuPath;
                this.outExcelUrl = url;
            },
            //图片状态改变时
            onImageChange(file,fileList){
                this.imageList = fileList;
                //this.exceed(file,fileList);
            },
            //文件状态改变时
            onFileChange(file,fileList){
                this.fileList = fileList;
            },
            //文件列表移除文件时
            onFileRemove(file,fileList){
                this.delFileList.push(file.id);
                this.fileList = fileList;
            },
            //图片列表移除图片时
            onImageRemove(file,fileList){
                this.delImageList.push(file.id);
                this.imageList = fileList;
            },
            /* 上传前验证文件 */
            beforeUploadFile: function(file) {
                if (!file.raw){
                    return;
                }
                if (this.checkFileSize(file.size,this.allowFile.size,file.name)){
                    return true;
                }else{
                    return false;
                }
            },
            /* 上传前验证图片类型 */
            beforeUploadImage: function(file) {
                if (!file.name){
                    return false;
                }
                if (this.checkFileType(file.type,this.allowImage.type,file.name)){
                    return true;
                }else{
                    return false;
                }
            },
            /* 裁剪图片 */
            cutImage:function(image){
                if (!(this.beforeUploadImage(image))){
                    _g.toastMsg('error','不是图片！');
                    return;
                }
                const that = this;
                let reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onloadend = function () {
                    that.isShowCropper = true;                                                       //  显示图片裁剪
                    that.option.img = this.result;                                                   //  把图片加载进入图片裁剪框
                    that.option.name = image.name;
                };
                return false;
            },
            /* 裁剪图片 */
            onCubeImg(){
                this.$refs.cropper.getCropData((data) => {
                    console.log(data);
                    let img = new Image();
                    let that = this;
                    img.src = data;
                    img.onload = function() {
                        let blob = dataURItoBlob(data);
                        console.log(blob);
                        let fileSize = blob.size;
                        if(fileSize / 1024 > 500){                                          //  图片不能超过500k
                            _g.toastMsg("warning", '图片不能超过500k!')
                            return
                        }
                        /*let formData = new FormData();
                        formData.append("file", blob,'tem.jpg');
                        formData.append("oldPhotoName", that.oldPhotoName);
                        that.paramFile = formData;*/
                        that.imageList.push({'name':that.option.name,'url':data,'data':blob});
                        //that.imageUrl = data;                                                            //  渲染图片
                    }
                    this.isShowCropper = false                                                  //  关闭裁剪框
                })
            },
            /* 取消裁剪 */
            cancelCubeImg(){
                this.isShowCropper = false
            },
            /* 验证文件类型 */
            checkFileType: function(type,allowType,name) {
                if (type !='' && allowType.indexOf(type) >= 0){
                    return true;
                }else{
                   // _g.toastMsg("error", name + ':文件类型错误，只允许'+allowType);
                    this.errorMess += '<p style="height: 22px;line-height: 22px;">' + name + ': 文件类型错误，只允许'+allowType + '</p>';
                    return false;
                }
            },
            /* 验证文件大小 */
            checkFileSize: function(size,allowSize,name) {
                if (allowSize*1024 >= size){
                    return true;
                }else{
                    this.errorMess += '<p style="height: 22px;line-height: 22px;">' + name + ': 文件太大,最大允许'+allowSize+'kb' + '</p>';
                   // _g.toastMsg("error", name + ':文件太大,最大允许'+allowSize+'kb');
                    return false;
                }
            },
            /* 验证文件个数 */
            exceed: function(files,fileList){
                if (files.length > 5){
                    _g.toastMsg("error", '最多5张图片');
                }
            },
            /* 修改物料时显示原有的图片 */
            getImages:function (images) {
                let imageArr = [];
                for (let i in images){
                    imageArr.push(images[i].image_url);
                }
                return imageArr;
            },
            /* 修改物料时显示原有的文件 */
            getFiles:function (files) {
                let fileArr = [];
                for (let i in files){
                    fileArr.push({name:files[i].old_name,url:files[i].file_url});
                }
                return fileArr;
            },
            /* 渲染表体内容 */
            getRenderValue:function(name,field){
                if (field == 'materiel_type_id'){
                    if (name.type){
                        return name.type.fullType;
                    }
                    return '';
                }
                if (field == 'materiel_inventory' || field == 'create_time'){
                    return name[field];
                }
                if (field == 'materiel_unit' && name[field]){
                    for (let item of this.unitData){
                        if (item.id == name[field]){
                            return item.label;
                        }
                    }
                }
                if (field == 'materiel_state'  && name[field] >= 0){
                    switch (name[field]) {
                        case 0: return '启用';break;
                        case 1: return '用完即止';break;
                        case 2: return '禁用';break;
                        case 3: return '选型';break;
                        case 4: return '报废';break;
                    }
                    /*let stateVal = name[field].split('-');
                    return stateVal.shift();*/
                }
                if (name[field]){
                    let val = name[field];
                    if (this.searchField.indexOf(field) >= 0){
                        if (val.indexOf(this.keywords) >= 0){
                            return val.replace(this.keywords,"<font color='red'>"+this.keywords+"</font>");
                        }else {
                            return val;
                        }
                    }else{
                        return val;
                    }
                }
            },
            /* 删除物料 */
            handleDelMateriel:function(row,index){
                this.$confirm('是否确定删除  '+row.materiel_name+'  ?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('提交中');
                    let data = {};
                    data.id = row.id;
                    this.apiPost('/materiel/del',data).then(res=>{
                        _g.showLoading().close();
                        if (res.code != 200){
                            _g.toastMsg("error", res.message);
                        }else{
                            _g.toastMsg("success", res.message);
                            let total = this.totalMateriel - 1;
                            let pageSize = this.pageSize;
                            let maxPage = Math.ceil(total/pageSize);
                            if (this.currentPage > maxPage && this.currentPage > 1){
                                this.currentPage = maxPage;
                            }
                            this.getMateriel();
                        }
                    });
                }).catch(()=>{});
            },
            /* 搜索物料 */
            searchMateriel:function(){
                let data = {};
                this.currentPage = 1;
                data.keywords = this.keywords;
                if (this.keywords){
                    let tag = {};
                    tag.name = this.keywords;
                    tag.type = '';
                    if (this.tags.length > 7){
                        this.tags.shift();
                    }
                    this.tags.push(tag);
                }
                this.getMateriel();
            },
            clickTag:function(tag){
                if (!tag.tag){
                    this.keywords = tag.name;
                    this.getMateriel();
                }
            },
            /* 清除搜索关键字 */
            closeSearchTag:function(tag){
                this.tags.splice(this.tags.indexOf(tag), 1);
                if (tag.tag && tag.tag == 'materielType'){
                    this.currentType = 0;
                    this.getMateriel();
                }else if(tag.name == this.keywords){
                    this.keywords = '';
                    this.getMateriel();
                }
            },
            /* 重组图片数组，表体中显示 */
            getImages:function (images) {
                let imageArr = [];
                for (let i in images){
                    imageArr.push(images[i].image_url);
                }
                return imageArr;
            },
            /* 重组文件数组，表体中显示 */
            getFiles:function (files) {
                let fileArr = [];
                for (let i in files){
                    fileArr.push({name:files[i].old_name,url:files[i].file_url});
                }
                return fileArr;
            },
            /* --------------------------------------- 物料类别 -------------------------------------------- */
            /* 拖动物料字段信息事件 */
            handleTypeDragStart(node, ev) {
                //console.log('drag start', node);
            },
            handleTypeDragEnter(draggingNode, dropNode, ev) {
                //console.log('tree drag enter: ', dropNode.show_name);
            },
            handleTypeDragLeave(draggingNode, dropNode, ev) {
                //console.log('tree drag leave: ', dropNode.show_name);
            },
            handleTypeDragOver(draggingNode, dropNode, ev) {
                //console.log('tree drag over: ', dropNode.show_name);
            },
            handleTypeDragEnd(draggingNode, dropNode, dropType, ev) {
                //console.log('tree drag end: ', dropNode && dropNode.show_name, dropType);
            },
            /* 拖动结束后重新获取物料以解决表头跟表体信息错位的问题 */
            handleTypeDrop(draggingNode, dropNode, dropType, ev) {
                this.saveTypeSort();
            },
            /* 禁止成为其它字段下级 */
            allowTypeDrop(draggingNode, dropNode, type) {
                if (draggingNode.level === dropNode.level){
                    return type !== 'inner'
                }
                return false;
            },
            /* 允许拖动 */
            allowTypeDrag(draggingNode) {
                return draggingNode.data.label.indexOf('全部') === -1;
            },
            /* 单击类别事件 */
            nodeClick: function(data) {
                /*let tag = {};
                tag.name = data.name;
                tag.type = 'danger';
                tag.tag = 'materielType';
                if (this.tags[0] && this.tags[0].tag == 'materielType'){
                    this.tags.shift();
                }
                this.tags.unshift(tag);*/
               // if (!data.children){
                    let pId = [];
                    if (data.path.length > 1){
                        let path = data.path.substr(1,data.path.length-2);
                        let key = 0;
                        path = path.split('-');
                        for (let value of path) {
                            pId[key] = Number(value);
                            key++;
                        }

                    }
                    pId.push(data.id);
                    this.materielForm.typeId = pId;
              //  }
                /*if (this.showMagerielDialog){
                    return;
                }*/
                this.currentPage = 1;
                this.currentType = data.id;
                this.getMateriel();
            },
            /* 递归使得指定的节点不可用 */
            makeNodeDisabled(children,idArr,idSelf){
                const that = this;
                for(let item of children){
                    if(idArr.indexOf(item.value) > -1) {
                        that.makeNodeDisabled(item.children,idArr,idSelf);
                    }else if(idSelf.indexOf(item.value) > -1) {
                        item['disabled'] = true;
                    }
                }
            },
            /* 递归恢复节点的可用性 */
            makeNodeAbled(children,idArr,tmpId){
                const that = this;
                for(let item of children){
                    if(idArr.indexOf(item.value) > -1) {
                        that.makeNodeAbled(item.children, idArr,tmpId);
                    }else if(tmpId.indexOf(item.value) > -1){
                        delete item['disabled'];
                    }
                }
            },
            /* 递归显示节点的可删除标签 */
            showNodeDelete(data,idArr){
                const that = this;
                for (let item of data){
                    if (idArr.indexOf(item.value) > -1){
                        idArr.shift();
                        if (idArr.length > 0){
                            that.showNodeDelete(item.children,idArr);
                        }else{
                            item.children = [];
                        }
                    }
                }
            },
            /* 提交类别表单到后台(新增、修改) */
            onSubmit(formName) {
                const that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {};
                        let tmpParentId = '';
                        data.name = this.typeForm.name;
                        if (this.typeForm.parentId.length > 0){
                            tmpParentId = this.typeForm.parentId[this.typeForm.parentId.length-1];
                            data.parentId = tmpParentId;
                        }
                        if (this.typeForm.id != ''){
                            data.id = this.typeForm.id;
                        }
                        that.$confirm('是否确认'+this.dialogConfirm+'类别?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        }).then(()=>{
                            _g.showLoading('提交中');
                            that.apiPost('materiel/type/save',data).then(res=>{
                                _g.showLoading().close();
                                if(typeof res === 'string'){
                                    res = JSON.parse(res)
                                }
                                if (res.code != 200){
                                    _g.toastMsg("error", res.message);
                                }else{
                                    this.dialogVisible = false;
                                    _g.toastMsg("success", res.message);
                                    this.resetForm('typeForm');
                                    if (res.type == 'insert'){
                                        const newChild = { id:res.data.id,label:res.data.name,children:[],name:res.data.name,value:res.data.id,parent_id:res.data.parent_id,path:res.data.path,children:undefined };
                                        if (this.tmpNodeData) {
                                            if (!this.tmpNodeData.children){
                                                this.$set(this.tmpNodeData, 'children', []);
                                            }
                                            this.tmpNodeData.children.push(newChild);
                                        }else{
                                            this.getTypeList();
                                            if (tmpParentId){
                                                this.defaultExpandedKeys.push(tmpParentId);
                                            }
                                        }
                                        let tmpInsertPath = res.data.path + res.data.name;
                                        this.typeNameList[tmpInsertPath] = 1;
                                        this.getTypeList();
                                    }
                                    if (res.type == 'update'){
                                        this.getTypeList();
                                    }
                                }
                            });
                        }).catch(()=>{});
                    } else {
                        return false;
                    }
                });
            },
            //点击新增类别打开弹框
            openDialog: function() {
                this.dialogVisible = true;
                this.dialogTitle='新增类别';
                this.dialogConfirm = '新增';
            },
            saveTypeSort:function(){
                this.apiPost('materiel/type/sort',this.typeData).then(res=>{
                    if (res.code == 200){
                        _g.toastMsg('success',res.message);
                    }else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            //点击取消关闭类别弹框
            closeDialog: function(formName) {
                if (this.tmpIdSelf.length > 0){
                    this.makeNodeAbled(this.typeData,this.typeForm.parentId,this.tmpIdSelf);
                }
                this.typeNameList[this.tmpNameList] = 1;
                this.tmpNameList = '';
                this.dialogVisible = false;
                this.resetForm(formName);
            },
            //点击类别弹框外、弹框叉叉关闭弹框
            handleClose: function() {
                if (this.tmpIdSelf.length > 0){
                    this.makeNodeAbled(this.typeData,this.typeForm.parentId,this.tmpIdSelf);
                }
                this.typeNameList[this.tmpNameList] = 1;
                this.tmpNameList = '';
                this.resetForm('typeForm');
            },
            /* 清空类别表单内容 */
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$refs[formName].clearValidate();
                this.typeForm.name = '';
                this.typeForm.parentId = [];
                this.typeForm.sort = '';
                this.typeForm.id = '';
                this.tmpIdSelf = '';
            },
            /* 编辑类别 */
            edit(data){
                this.defaultExpandedKeys = [data.id];
                let pathName = data.path+data.name;
                this.typeNameList[pathName] = 0;
                this.tmpNameList = pathName;
                this.dialogConfirm = '修改';
                this.dialogTitle = '修改类别';
                this.typeForm.id = data.id;
                this.typeForm.name = data.name;
                let pId = [];
                if (data.path.length > 1){
                    let path = data.path.substr(1,data.path.length-2);
                    let key = 0;
                    path = path.split('-');
                    for (let value of path) {
                        pId[key] = Number(value);
                        key++;
                    }
                }else{
                    pId = [];
                }
                this.typeForm.parentId = pId;
                this.dialogVisible = true;
                setTimeout(()=>{
                    this.$refs.typeFormName.$el.children[0].focus();
                },0);
                this.tmpIdSelf = [data.id];
                this.makeNodeDisabled(this.typeData,this.typeForm.parentId,this.tmpIdSelf);

            },
            /* 删除类别 */
            remove(node,data){
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    _g.showLoading('提交中');
                    this.apiPost('/materiel/type/del/',{'id':data.id}).then(res=>{
                        _g.showLoading().close();
                        if (res.code == 200){
                            const parent = node.parent;
                            const children = parent.data.children || parent.data;
                            const index = children.findIndex(d => d.id === data.id);
                            if (parent.childNodes.length <= 1){
                                let pId = [];
                                if (data.path.length > 1){
                                    let path = data.path.substr(1,data.path.length-2);
                                    let key = 0;
                                    path = path.split('-');
                                    for (let value of path) {
                                        pId[key] = Number(value);
                                        key++;
                                    }
                                }else{
                                    pId = [];
                                }
                                this.showNodeDelete(this.typeData,pId);
                            }
                            children.splice(index, 1);
                            let tmpPath = data.path + data.name;
                            this.typeNameList[tmpPath] = 0;
                            _g.toastMsg("success", res.message);
                        }else{
                            _g.toastMsg("error", res.message);
                        }
                    });
                }).catch(()=>{});
            },
            /* 显示新增类别弹框 */
            append:function(data){
                this.dialogTitle = '新增类别';
                this.dialogConfirm = '新增';
                this.dialogVisible = true;
                this.defaultExpandedKeys = [data.id];
                let pId = [];
                if (data.path.length > 1){
                    let path = data.path.substr(1,data.path.length-2);
                    let key = 0;
                    path = path.split('-');
                    for (let value of path) {
                        pId[key] = Number(value);
                        key++;
                    }
                    pId.push(data.id);
                }else{
                    pId = [data.id];
                }
                this.typeForm.parentId = pId;
                this.tmpNodeData = data;
                setTimeout(()=>{
                    this.$refs.typeFormName.$el.children[0].focus();
                },0);
            },
            //获取物料类别
            getTypeList: function () {
                this.apiPost('/materiel/type/all','').then(res=>{
                    let typeAllDate = {};
                    typeAllDate.name = '全部';
                    typeAllDate.label = '全部';
                    typeAllDate.id = 0;
                    typeAllDate.value = 0;
                    typeAllDate.parent_id = 0;
                    typeAllDate.path = '-';
                    typeAllDate.children = res.data;
                    this.typeAllDate = [typeAllDate];
                    this.typeData = res.data;
                    this.typeNameList = res.list;
                });
            },
            //获取物料
            getMateriel: function () {
                let path = this.$route.path;
                let data = {'type':this.currentType,'pageSize':this.pageSize,'page':this.currentPage,'sortColumn':this.sortColumn,'sortDirection':this.sortDirection,'isDelete':this.isDelete,'url':path};
                data.state = this.filterValue;
                if (this.keywords != '') {
                    data.keywords = this.keywords;
                }
                this.apiPost('/materiel/index',data).then(res=>{
                    this.materielData = res.data;
                    this.totalMateriel = res.count;
                });
            },
            /* 物料弹框拖动事件 */
            moveMaterielDiolog:function(){
                var materielDialogDiv = this.$refs.materielDialog;
                //var dialogW = materielDialogDiv.offsetWidth;
                var dialogW = 830;
                var screenW = window.screen.availWidth;
                var screenH = window.screen.availHeight;
                var dialogTitle = materielDialogDiv['children'][0];
                dialogTitle.onmousedown = function (e) {
                    var disX = (e || event).clientX;
                    var disY = (e || event).clientY;
                    materielDialogDiv.left = materielDialogDiv.offsetLeft;
                    materielDialogDiv.top = materielDialogDiv.offsetTop;
                    document.onmousemove = function (e) {
                        var iX = materielDialogDiv.left + ((e || event).clientX - disX);
                        var iY = materielDialogDiv.top + ((e || event).clientY - disY);
                        var e = e || window.event;
                        var mX = screenW - dialogW;
                        var mY = screenH - 170;
                        iX < 0 && (iX = 0);
                        iX > mX && (iX = mX);
                        iY < 0 && (iY = 0);
                        iY > mY && (iY = mY);
                        materielDialogDiv.style.left = iX + 'px';
                        materielDialogDiv.style.top = iY + 'px';
                        return false;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        materielDialogDiv.releaseCapture && materielDialogDiv.releaseCapture();
                    };
                    materielDialogDiv.setCapture && materielDialogDiv.setCapture();
                    return false;
                }

            },
            // 多选高亮选中行
            rowClass({row, rowIndex}){
                if(this.selectRow.includes(rowIndex)){
                    return { "background-color": "rgba(185, 221, 249, 0.75)" }
                }
            },
            /* 分隔线拖动事件 */
            moveSplitLine:function(){
                //const that = this
                var allBox = this.$refs.allBox.$el;
                var materielTypeBox = this.$refs.materielTypeBox.$el;
                var materielBox = this.$refs.materielBox.$el;
                var splitLine = this.$refs.splitLine.$el;
                var pageDiv = materielBox['children'][3];
                splitLine.onmousedown = function (e) {
                    var disX = (e || event).clientX;
                    splitLine.left = splitLine.offsetLeft;
                    document.onmousemove = function (e) {
                        var iT = splitLine.left + ((e || event).clientX - disX);

                        var e = e || window.event;
                        var maxT = allBox.clientWidth - splitLine.offsetWidth;  //clientWight
                        iT < 0 && (iT = 0);
                        iT > maxT && (iT = maxT);
                        splitLine.style.left = iT + "px";
                        if (((allBox.clientWidth >1300 && (allBox.clientWidth - iT) > 800) || allBox.clientWidth <= 1300) && iT >= 190){
                            materielTypeBox.style.width = Math.floor(iT/allBox.clientWidth*100) + "%";
                            materielBox.style.width = (100 - Math.floor(iT/allBox.clientWidth*100)) + "%";
                            pageDiv.style.width = (100 - Math.floor(iT/allBox.clientWidth*100) - 0.1) + "%";
                        }
                        return false;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        splitLine.releaseCapture && splitLine.releaseCapture();
                    };
                    splitLine.setCapture && splitLine.setCapture();
                    return false;
                };
            },
            /* 计算分割线的高度,物料表单弹框定位 */
            splitLineHeight:function () {
                var splitLine = this.$refs.splitLine.$el;
                var materielTypeBox = this.$refs.materielTypeBox.$el;
                var heightOne = window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 2;
                var materielDialogDiv = this.$refs.materielDialog;
                var dialogW = 830;
                // var dialogW = materielDialogDiv.offsetWidth;
                var screenW = window.screen.availWidth;
                splitLine.style.height = heightOne + 'px';
                materielTypeBox.style.height = heightOne + 'px';
                materielDialogDiv.style.left = Math.floor((screenW - dialogW)/2) + 'px';
            }
        },
        watch: {
            selection(data) {
                this.selectRow = [];
                if (data.length > 0) {
                    data.forEach((item, index) => {
                        this.selectRow.push(this.materielData.indexOf(item));
                    });
                }
            }
        },
        mounted: function () {
            this.getFieldList();
            this.getTypeList();
            this.getMateriel();
            this.getUnit();
            this.splitLineHeight();
            this.moveSplitLine();
            this.moveMaterielDiolog();
            this.getOutExcelUrl();
        },
        mixins: [http]
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    $color-blue: #2196F3;
    $space-width: 18px;
    .ms-tree-space {
        position: relative;
        top: 1px;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        width: $space-width;
        height: 14px;
        &::before {
            content: ""
        }
    }
    .processContainer{
        width: 100%;
        height: 100%;
    }
    table td {
        line-height: 26px;
    }

    .tree-ctrl{
        position: relative;
        cursor: pointer;
        color: $color-blue;
        margin-left: -$space-width;
    }
    .left-sider{
        height: 100%;
        overflow: hidden;
    }
    .right-content {
        height: 100%;
    }
    .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 20px;
    }
    .toggleShow{
        display: none;
        margin-left: 20px;
        padding-bottom: 7px;
    }
    .toggleShow button{
        width: 20px;
        height: 23px;
        margin-left: 0;
    }
    .toggleShow span svg{
        width: 7px;
        height: 7px;
    }
    .el-tree-node__content:hover .custom-tree-node > span.toggleShow{
        display: inline-block;
    }
    .operatBtnSmall{
        color: white;
        background-color: #f39c00;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
    }
    .operatBtn:hover{
        background-color: #f5b466;
    }
    .el-carousel__item img {
        opacity: 0.75;
        height: 150px;
        line-height: 150px;
        margin: 0;
    }
    .split-line{
        width: 2px;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        background-color: #E6EEF8;
        cursor:w-resize;
        float: left;
    }
    .pageWrapper{
        margin-left: 8px;
        width: 87.4%;
        height: 40px;
        position: fixed;
        z-index: 40;
        right: 0;
        bottom: 0;
        background-color: #E6EEF8;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
    }
    .operation{
        border-left: 1px solid #d1d1d1;
    }
    .operatBtnBig{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        width: 44px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle:hover,.operatBtnBig:hover{
        background-color: #f5b466;
    }
    .materielClass{
        position: fixed;
        width: 830px;
        max-height: 80%;
        top: 50px;
        margin:0 auto;
        overflow: auto;
        background-color: white;
        box-shadow: 1px 1px 5px rgba(0,0,0,.2);
        border-radius: 10px;
        z-index: 50;
        padding: 10px 15px 20px 15px;
    }
    .materielTitle{
        height: 24px;
        line-height: 24px;
        padding: 20px 30px 10px 30px;
        font-size: 18px;
        color: #303133;
        cursor: move;
    }
    .materielContent{
        padding: 30px 30px;
    }
    .materielFooter{
        padding: 10px 30px 30px 30px;
        text-align: right;
    }
    .materielButton{
        display: inline-block;
        height: 18px;
        line-height: 18px;
        width: 18px;
        padding: 2px 5px;
        cursor: pointer;
    }
    .searchTag{
        position: absolute;
        top: -40px;
        left: 260px;
    }
    .keywordsTag{
        cursor: pointer;
    }
</style>